.recommendationAccordion {
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--recommendationLiveBorderColor);

  &.read {
    border: 1px solid var(--recommendationBgColor);
  }

  .redisStackLink {
    margin-right: 12px;
  }

  :global {
    .euiAccordion__childWrapper {
      background-color: var(--recommendationBgColor) !important;
    }
    .euiAccordion__button {
      padding: 6px 18px;
      border-bottom: 1px solid transparent;
      color: var(--euiTextSubduedColor) !important;
      background-color: var(--recommendationBgColor) !important;
      font-size: 14px;
      font-weight: 400;

      transition: border-bottom-color ease 0.3s;

      .euiIEFlexWrapFix {
        display: inline-block;
        width: calc(100% - 28px);
      }

      .truncateText {
        display: block;
      }
    }

    .euiAccordion.euiAccordion-isOpen {
      .euiAccordion__button {
        padding: 14px 18px;
        color: var(--htmlColor) !important;
        font-weight: 500;
      }

      .euiIEFlexWrapFix .truncateText {
        display: flex;
        overflow: visible;
        white-space: normal !important;
      }
    }

    .euiPanel {
      background: var(--recommendationBgColor) !important;
      padding: 0 18px 18px !important;
    }

    .euiAccordion__iconWrapper {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .euiAccordion__buttonReverse .euiAccordion__icon {
      width: 12px;
      height: 12px;
      vertical-align: middle;
    }
  }
}

.wrapper,
.recommendationAccordion {
  .text {
    font: normal normal normal 14px/19px Graphik !important;
  }

  .span {
    display: inline;
  }

  .code {
    background-color: var(--euiColorLightestShade);
    border-radius: 4px;
    padding: 3px 6px;

    code {
      font-size: inherit !important;
    }
  }
}

.actions {
  display: flex;
  margin-top: 15px;
  justify-content: space-around;
  align-items: center;
  height: 48px;
}

.fullWidth {
  width: 100%;
}

.votingContainer {
  border-radius: 8px;
  background-color: var(--recommendationsBgColor) !important;
  padding: 4px 0 4px 10px;
}

.keyNameContainer {
  background-color: var(--recommendationBgColor);
}

.snoozeBtn {
  svg {
    fill: var(--recommendationBgColor) !important;
    g, circle, path {
      stroke: currentColor !important;
    }
  }
}

.accordionContent {
  .btn {
    box-shadow: none !important;
    display: block;
    margin-top: 1px;
    height: 32px !important;
    min-width: 60px !important;
    border-color: var(--highlightDotColor) !important;
    background-color: var(--highlightDotColor) !important;
    margin-bottom: 12px;

    svg path {
      fill: var(--euiColorEmptyShade);
    }

    :global(.euiButton__content) {
      padding: 0 12px;
    }

    :global(.euiButton__text) {
      color: var(--euiColorEmptyShade);
      font:
        normal normal 500 14px/17px Graphik,
        sans-serif !important;
    }
  }
}
